<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/performance_model_icon.png"/>
    <h1>SceneModel</h1>
    <h2>Non-realistic rendering, no geometry reuse, triangle primitives</h2>
    <p>
        <a href="../../docs/class/src/viewer/scene/model/SceneModel.js~SceneModel.html"
           target="_other">SceneModel</a> is a WebGL2-based <a
            href="../../docs/class/src/viewer/scene/model/SceneModel.js~SceneModel.html"
            target="_other">SceneModel</a> implementation that stores model geometry as data textures on the GPU.
    </p>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/model/SceneModel.js~SceneModel.html"
               target="_other">SceneModel</a>
        </li>
    </ul>
</div>
</body>

<script type="module">

    import {Viewer, SceneModel} from "../../dist/xeokit-sdk.min.es.js";

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true,
        dtxEnabled: true // Enable data texture model representation
    });

    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
    viewer.scene.camera.look = [0, -5.75, 0];
    viewer.scene.camera.up = [0.37, 0.91, -0.11];

    const sceneModel = new SceneModel(viewer.scene, {
        id: "table",
        position: [0, 0, 0],
        scale: [1, 1, 1],
        rotation: [0, 0, 0],
        edges: true,
        dtxEnabled: true
    });

    sceneModel.createMesh({
        id: "redLegMesh",
        primitive: "triangles",
        positionsCompressed: [
            16381,60484,16381,
            5460,60484,16381,
            5460,0,16381,
            16381, 0,16381,
            16381, 60484,16381,
            16381, 0,16381,
            16381,0, 5460,
            16381,60484, 5460,
            16381,60484, 16381,
            16381,60484, 5460,
            5460,60484, 5460,
            5460,60484, 16381,
            5460,60484, 16381,
            5460,60484, 5460,
            5460,0, 5460,
            5460,0, 16381,
            5460,0, 5460,
            16381,0, 5460,
            16381,0, 16381,
            5460,0, 16381,
            16381,0, 5460,
            5460,0, 5460,
            5460,60484, 5460,
            16381,60484, 5460
        ],
        positionsDecodeMatrix: [
            0.00003052270125906143, 0, 0, 0,
            0, 0.00003052270125906143, 0, 0,
            0, 0, 0.00003052270125906143, 0,
            -1, -1, -1, 1
        ],
        indices: [
            0, 1, 2, 0, 2, 3,            // front
            4, 5, 6, 4, 6, 7,            // right
            8, 9, 10, 8, 10, 11,         // top
            12, 13, 14, 12, 14, 15,      // left
            16, 17, 18, 16, 18, 19,      // bottom
            20, 21, 22, 20, 22, 23
        ],
        color: [1, 0.3, 0.3]
    });

    sceneModel.createEntity({
        id: "redLeg",
        meshIds: ["redLegMesh"]
    });

    sceneModel.createMesh({
        id: "greenLegMesh",
        primitive: "triangles",
        positionsCompressed: [
            60064,60484, 16381,
            49143,60484, 16381,
            49143,0, 16381,
            60064, 0, 16381,
            60064, 60484, 16381,
            60064, 0, 16381,
            60064, 0, 5460,
            60064, 60484, 5460,
            60064, 60484, 16381,
            60064, 60484, 5460,
            49143, 60484, 5460,
            49143, 60484, 16381,
            49143, 60484, 16381,
            49143, 60484, 5460,
            49143, 0, 5460,
            49143, 0, 16381,
            49143, 0, 5460,
            60064, 0, 5460,
            60064, 0, 16381,
            49143, 0, 16381,
            60064, 0, 5460,
            49143, 0, 5460,
            49143, 60484, 5460,
            60064, 60484, 5460
        ],
        positionsDecodeMatrix: [
            0.00003052270125906143, 0, 0, 0,
            0, 0.00003052270125906143, 0, 0,
            0, 0, 0.00003052270125906143, 0,
            -1, -1, -1, 1
        ],
        indices: [
            0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15,
            16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23
        ],
        color: [0.3, 1.0, 0.3]
    });

    sceneModel.createEntity({
        id: "greenLeg",
        meshIds: ["greenLegMesh"]
    });

    sceneModel.createMesh({
        id: "blueLegMesh",
        positionsCompressed: [
            60064, 60484, 60064,
            49143, 60484, 60064,
            49143, 0, 60064,
            60064, 0, 60064,
            60064, 60484, 60064,
            60064, 0, 60064,
            60064, 0, 49143,
            60064, 60484, 49143,
            60064, 60484, 60064,
            60064, 60484,49143,
            49143, 60484,49143,
            49143, 60484,60064,
            49143, 60484,60064,
            49143, 60484,49143,
            49143, 0,49143,
            49143, 0,60064,
            49143, 0,49143,
            60064, 0,49143,
            60064, 0,60064,
            49143, 0,60064,
            60064, 0,49143,
            49143, 0,49143,
            49143, 60484,49143,
            60064, 60484,49143
        ],
        positionsDecodeMatrix: [
            0.00003052270125906143, 0, 0, 0,
            0, 0.00003052270125906143, 0, 0,
            0, 0, 0.00003052270125906143, 0,
            -1, -1, -1, 1
        ],
        indices: [
            0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19,
            20, 21, 22, 20, 22, 23
        ],
        color: [0.3, 0.3, 1.0]
    });

    sceneModel.createEntity({
        id: "blueLeg",
        meshIds: ["blueLegMesh"]
    });

    sceneModel.createMesh({
        id: "yellowLegMesh",
        positionsCompressed: [
            16381, 60484,60064,
            5460, 60484,60064,
            5460, 0,60064,
            16381, 0,60064,
            16381, 60484,60064,
            16381, 0,60064,
            16381, 0,49143,
            16381, 60484,49143,
            16381, 60484,60064,
            16381, 60484,49143,
            5460, 60484,49143,
            5460, 60484,60064,
            5460, 60484,60064,
            5460, 60484,49143,
            5460, 0,49143,
            5460, 0,60064,
            5460, 0,49143,
            16381, 0,49143,
            16381, 0,60064,
            5460, 0,60064,
            16381, 0,49143,
            5460, 0,49143,
            5460, 60484,49143,
            16381, 60484,49143
        ],
        positionsDecodeMatrix: [
            0.00003052270125906143, 0, 0, 0,
            0, 0.00003052270125906143, 0, 0,
            0, 0, 0.00003052270125906143, 0,
            -1, -1, -1, 1
        ],
        indices: [
            0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19,
            20, 21, 22, 20, 22, 23
        ],
        color: [1.0, 1.0, 0.0]
    });

    sceneModel.createEntity({
        id: "yellowLeg",
        meshIds: ["yellowLegMesh"]
    });

    sceneModel.createMesh({
        id: "purpleTableTopMesh",
        positionsCompressed: [
            65525, 65525,65525,
            0, 65525,65525,
            0, 55444,65525,
            65525, 55444,65525,
            65525, 65525,65525,
            65525, 55444,65525,
            65525, 55444,0,
            65525, 65525,0,
            65525, 65525,65525,
            65525, 65525,0,
            0, 65525,0,
            0, 65525,65525,
            0, 65525,65525,
            0, 65525,0,
            0, 55444,0,
            0, 55444,65525,
            0, 55444,0,
            65525, 55444, 0,
            65525, 55444, 65525,
            0, 55444, 65525,
            65525, 55444, 0,
            0, 55444, 0,
            0, 65525, 0,
            65525, 65525,0
        ],
        positionsDecodeMatrix: [
            0.00003052270125906143, 0, 0, 0,
            0, 0.00003052270125906143, 0, 0,
            0, 0, 0.00003052270125906143, 0,
            -1, -1, -1, 1
        ],
        indices: [
            0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19,
            20, 21, 22, 20, 22, 23
        ],
        color: [1.0, 0.3, 1.0]
    });

    sceneModel.createEntity({
        id: "purpleTableTop",
        meshIds: ["purpleTableTopMesh"]
    });

    sceneModel.finalize();

</script>
</html>